<template>
	<view class="container">
		<view class="search-wrap">
			<view class="search-inner">
				<view class="input-wrap">
					<image src="../../static/images/search.png"></image>
					<input placeholder-class="input-calss" @confirm="search" placeholder="输入园区或位置" />
				</view>
				<view class="cancel-btn" @click="cancel">取消</view>
			</view>
		</view>
		<view class="search-hot">
			<view class="search-title">热门搜索</view>
			<view class="search-content">
				<navigator url="##" class="search-list" @click="search1(item.name)" v-for="(item,index) in hotSearch">{{item.name}}</navigator>
			</view>
		</view>
		<view  class="lishi">
			<view class="search"> 历史搜索</view>
			<view class="qingkong" @click="qingkong">清空历史搜索</view>

		</view>
		<view class="lishi-item" v-for="(item,index) in sousuo"  @click="search1(item)">
			{{item}}
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				hotSearch: [{
						id: 1,
						name: '威和科创园'
					},
					{
						id: 1,
						name: '华腾·康宝橱电城'
					},
					{
						id: 1,
						name: '华腾芯城'
					},
					{
						id: 1,
						name: '华腾科技城'
					}
				],
				sousuo: [
			
				]
			}
		
		},
		onLoad() {
			uni.getStorage({
				key:'sousuo',
				success:(res)=>{
					console.log(res)
						this.sousuo=res.data
				}
			})
		},
		methods: {
			search(e) {
				console.log(e)
				getApp().globalData.search_key = e.detail.value
				let count=	this.sousuo.unshift(e.detail.value)
				if(count>10){
					this.sousuo.pop()
				}
				uni.setStorage({
					
					key : 'sousuo',
					data:this.sousuo
				})	
				uni.switchTab({
					url: '/pages/list/list',

				})
			},
			qingkong(){
				this.sousuo=[]
				uni.setStorage({
					key : 'sousuo',
					data:this.sousuo
				})	
			},
			cancel() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search1(name) {



				getApp().globalData.search_key = name

				let count=	this.sousuo.unshift(name)
				if(count>10){
					this.sousuo.pop()
				}
				uni.setStorage({		
					key : 'sousuo',
					data:this.sousuo
				})	

				uni.switchTab({

					url: '/pages/list/list',



				})

			},
		}

	}
</script>

<style scoped lang="scss">
	.search-wrap {
		padding: 40rpx 30rpx;
	}

	.search-inner {
		display: flex;
	}

	.input-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		height: 70rpx;
		border-radius: 8rpx;
	}

	.input-wrap image {
		width: 20rpx;
		height: 20rpx;
		flex: none;
		margin: 0 20rpx;
	}

	.input-wrap input {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #9a9ba0;
	}

	.input-calss {
		font-size: 24rpx;
		color: #9a9ba0;
	}

	.cancel-btn {
		flex: none;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #313131;
		text-align: center;
		margin-left: 20rpx;
	}

	.search-hot {
		margin: 0 30rpx;
	}

	.search-title {
		font-size: 30rpx;
		color: #313131;
		font-weight: bold;
		margin-bottom: 25rpx;
	}

	.search-content {
		display: flex;
		flex-wrap: wrap;
	}

	.search-list {
		background-color: #f8f8f6;
		border-radius: 4rpx;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		color: #000000;
		margin: 0 20rpx 25rpx 0;
	}

	.lishi {
		margin-top: 37rpx;
		display: flex;
		margin: 0 15px;
		justify-content: space-between;

		.search {

			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #313131;
		}
	}

	.lishi-item {
		margin: 0 15px;
		height: 73rpx;
		border-bottom: 1rpx solid #E4E4E4;
		display: flex;
		align-items: center;

		font-size: 24rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #313131;
	}
</style>
